いろいろな表を作る　＊基礎編＊

表（テーブル）を作りたい！

＜table＞～＜/table＞表を作るということを宣言
＜tr＞～＜/tr＞横一列（行）を指定
＜td＞～＜/td＞セルを指定
＜table＞～＜/table＞は、このタグにはさまれた範囲がテーブル（表）であることを示すタグです。
＜tr＞～＜/tr＞は行を定義するタグです。行は横１列分並べたデータの最初と最後に記述します。
＜td＞～＜/td＞は、セルに入るデータをそれぞれ囲います。

Lesson1（1行×３セルの表を作る）

梅 50円10個
 ＜table border="1"＞＜tr＞
＜td＞梅＜/td＞＜td＞50円＜/td＞＜td＞10個＜/td＞＜/tr＞＜/table＞

★３行×９セルの表を作ってみましょう！

梅 50円10個
松30円40個
竹18円60個
 ＜table border="1"＞＜tr＞
＜td＞梅＜/td＞＜td＞50円＜/td＞＜td＞10個＜/td＞＜/tr＞ ＜td＞松＜/td＞＜td＞30円＜/td＞＜td＞40個＜/td＞＜/tr＞ ＜td＞竹＜/td＞＜td＞18円＜/td＞＜td＞60個＜/td＞＜/tr＞＜/table＞

Lesson3　枠線の幅を設定してみましょう！

梅 50円10個
松30円40個
竹18円60個
 ＜table border="5"＞＜tr＞
＜td＞梅＜/td＞＜td＞50円＜/td＞＜td＞10個＜/td＞＜/tr＞ ＜td＞松＜/td＞＜td＞30円＜/td＞＜td＞40個＜/td＞＜/tr＞ ＜td＞竹＜/td＞＜td＞18円＜/td＞＜td＞60個＜/td＞＜/tr＞＜/table＞

★枠線の色を変えてみましょう！＜bordercolor="★"＞

梅 50円10個
松30円40個
竹18円60個
 ＜table border="5" bordercolor="#99cc99"＞＜tr＞
＜td＞梅＜/td＞＜td＞50円＜/td＞＜td＞10個＜/td＞＜/tr＞ ＜td＞松＜/td＞＜td＞30円＜/td＞＜td＞40個＜/td＞＜/tr＞ ＜td＞竹＜/td＞＜td＞18円＜/td＞＜td＞60個＜/td＞＜/tr＞＜/table＞

Lesson4　テーブルの背景に色をつけてみよう！

梅 50円10個
松30円40個
竹18円60個
 ＜table border="1" bgcolor="#ffffcc"＞＜tr＞
＜td＞梅＜/td＞＜td＞50円＜/td＞＜td＞10個＜/td＞＜/tr＞ ＜td＞松＜/td＞＜td＞30円＜/td＞＜td＞40個＜/td＞＜/tr＞ ＜td＞竹＜/td＞＜td＞18円＜/td＞＜td＞60個＜/td＞＜/tr＞＜/table＞

★テーブルの背景に画像を表示してみよう！

梅 50円10個
松30円40個
竹18円60個
 ＜table border="1" background="画像"＞＜tr＞
＜td＞梅＜/td＞＜td＞50円＜/td＞＜td＞10個＜/td＞＜/tr＞ ＜td＞松＜/td＞＜td＞30円＜/td＞＜td＞40個＜/td＞＜/tr＞ ＜td＞竹＜/td＞＜td＞18円＜/td＞＜td＞60個＜/td＞＜/tr＞＜/table＞
© Rakuten Group, Inc.